<template>
  <div class="posRelative">
      <!-- 用户头像 -->
    <img :src="getPhotoPath === '' ? require('../assets/images/noPhoto.jpg') : getPhotoPath" class="avatarSmall" :key = "1">
    <!-- 头部基本信息 -->
    <el-row>
      <el-col :span="24">
        <header-top></header-top>
      </el-col>
    </el-row>
    <!-- logo -->
    <el-row>
      <el-col :span="24">
          <logo-top class="marT13"></logo-top>
      </el-col>
    </el-row>
    <div class="line marT10"></div>
    <div class="addResumeWrapper">
        <!-- 照片与简历 -->
        <el-row :gutter="20" class="posRelative paddB100">
            <el-col :span="24">
                    <h3>我的照片<icon name="notFinished" class="scaleIcon1 marLR20" v-show="!isPhotoFinishedMsg"></icon></h3>
                    <el-upload
                        class="avatar-uploader"
                        :show-file-list="false"
                        :before-upload="beforeupload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="btnGroup">
                        <div class="el-upload__tip">只能上传jpg、jpeg、png图片，且不超过500kb</div>
                        <button class="operatBtn marT20" @click.stop="submitPhoto" :disabled="paramFile === null ? true : false" :class="{notAllowed:paramFile === null }">确认上传</button>
                    </div>
            </el-col>
            <!-- <el-col :span="8">
                    <h3>我的简历</h3>
                    <el-upload
                        class="upload-demo"
                        :before-upload="beforeUploadFile"
                        limit = 1>
                        <button class="operatBtn marT20" slot="trigger" :disabled="resumeFile !== null ? true : false" :class="{notAllowed:resumeFile !== null }">选择文件</button>
                        <div slot="tip" class="el-upload__tip" v-show="tmpFileName !== ''">
                            <icon name="file" class="scaleIcon1" title="文件"></icon>
                            {{tmpFileName}}
                        </div>
                    </el-upload>
                    <div class="btnGroup">
                        <div class="el-upload__tip">只能上传doc、docx、pdf文件，且不超过1M</div>
                        <button class="operatBtn marT20" @click.stop="submitFile" :disabled="resumeFile === null ? true : false" :class="{notAllowed:resumeFile === null }">确认上传</button>
                    </div>
            </el-col> -->
        </el-row>

        <div class="grayLine"></div>

        <!-- 基本信息 -->
        <el-row class="posRelative paddB60 marT20">
            <el-col :span="24">
                    <h3>基本信息<icon name="notFinished" class="scaleIcon1 marLR20" v-show="!isBaseMsgFinishedMsg"></icon></h3>
                    <el-form ref="baseMsgFrm" :model="baseMsgFrm" :rules="rules" class="marT10" :inline="true" hide-required-asterisk=true label-width="82px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="姓名" prop="userName">
                                    <el-input v-model.trim="baseMsgFrm.userName" placeholder="请输入姓名" maxlength='10' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="性别" prop="userSex">
                                    <el-select v-model="baseMsgFrm.userSex" placeholder="请选择" class="inputTxtWrapper" @change="watchFrmChange('baseMsgFrm')">
                                        <el-option
                                            v-for="item in sex"
                                            :key="item.type"
                                            :label="item.label"
                                            :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="出生日期" prop="userBirth">
                                    <!-- <el-input v-model.trim="baseMsgFrm.userBirth" class="inputTxtWrapper" readonly="true" disabled></el-input> -->
                                    {{baseMsgFrm.userBirth === '' ? '/' : baseMsgFrm.userBirth}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="政治面貌" prop="politicalOutlook">
                                    <el-select v-model="baseMsgFrm.politicalOutlook" placeholder="请选择政治面貌"  class="inputTxtWrapper" @change="watchFrmChange('baseMsgFrm')">
                                        <el-option
                                            v-for="item in outlook"
                                            :key="item.type"
                                            :label="item.label"
                                            :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="婚姻状况" prop="maritalStatus">
                                    <el-select v-model="baseMsgFrm.maritalStatus" placeholder="请选择婚姻状况" class="inputTxtWrapper" @change="watchFrmChange('baseMsgFrm')">
                                        <el-option
                                            v-for="item in maritalStatus"
                                            :key="item.type"
                                            :label="item.label"
                                            :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="健康状况" prop="health">
                                    <el-select v-model="baseMsgFrm.health" placeholder="请选择健康状况" class="inputTxtWrapper" @change="watchFrmChange('baseMsgFrm')">
                                        <el-option
                                            v-for="item in health"
                                            :key="item.type"
                                            :label="item.label"
                                            :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="籍贯" prop="nativePlace">
                                    <el-input v-model.trim="baseMsgFrm.nativePlace" placeholder="请输入籍贯" maxlength='20' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="邮箱" prop="userEmail">
                                    <el-input v-model.trim="baseMsgFrm.userEmail" placeholder="请输入邮箱" maxlength='50' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="QQ" prop="qq">
                                    <el-input v-model.trim.number="baseMsgFrm.qq" placeholder="请输入QQ" maxlength='10' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="民族" prop="nation">
                                    <el-select v-model="baseMsgFrm.nation" placeholder="请选择民族"  class="inputTxtWrapper" @change="watchFrmChange('baseMsgFrm')">
                                        <el-option
                                            v-for="item in nation"
                                            :key="item.type"
                                            :label="item.label"
                                            :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="职称" prop="userTitle">
                                    <el-input v-model.trim="baseMsgFrm.userTitle" placeholder="请输入职称" maxlength='15' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系电话" prop="userTel">
                                    <el-input v-model.trim="baseMsgFrm.userTel" placeholder="多个电话以，分隔" maxlength='100' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="身份证号" prop="userCardNo">
                                    <el-input v-model.trim="baseMsgFrm.userCardNo" placeholder="请输入身份证号" maxlength='18' class="inputTxtWrapper" @blur.stop="changeUserBirth" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="户籍地址" prop="perAddress">
                                    <el-input v-model.trim="baseMsgFrm.perAddress" placeholder="请输入户籍所在地" maxlength='50' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="常住地址" prop="concatAddress">
                                    <el-input v-model.trim="baseMsgFrm.concatAddress" placeholder="请输入常住地址" maxlength='50' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <!-- <el-col :span="8">
                                <el-form-item label="公积金账号" prop="fundAccount">
                                    <el-input v-model.trim.number="baseMsgFrm.fundAccount" placeholder="请输入公积金账号" maxlength='12' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="8">
                                <el-form-item label="毕业院校" prop="iniSchool">
                                    <el-input v-model.trim="baseMsgFrm.iniSchool" placeholder="请输入毕业院校" maxlength='10' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="毕业时间" prop="iniGradTime">
                                    <el-date-picker
                                        class="inputTxtWrapper"
                                        v-model="baseMsgFrm.iniGradTime"
                                        type="month"
                                        value-format="yyyy-MM"
                                        :editable = "false"
                                        placeholder="请选择毕业时间"
                                         @change="watchFrmChange('baseMsgFrm')">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学历" prop="education">
                                    <el-select v-model="baseMsgFrm.education" placeholder="请选择" class="inputTxtWrapper"  @change="watchFrmChange('baseMsgFrm')">
                                        <el-option
                                            v-for="item in educationArr"
                                            :key="item.type"
                                            :label="item.label"
                                            :value="item.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="专业" prop="professName">
                                    <el-input v-model.trim="baseMsgFrm.professName" placeholder="多个专业以,分隔" maxlength='30' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="8">
                                <el-form-item label="公积金账号" prop="existWorkingAge">
                                    <el-input v-model.trim.number="baseMsgFrm.existWorkingAge" placeholder="请输入历史社保(按月计)" maxlength='18' class="inputTxtWrapper" @input.stop.native="watchFrmChange('baseMsgFrm')"></el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </el-form>
                    <div class="btnGroup">
                        <button class="operatBtn marT20" @click.stop="submitBaseMsg" :disabled="!isBaseMsgOk" :class="{notAllowed:!isBaseMsgOk}">确认提交</button>
                    </div>
            </el-col>
        </el-row>

         <div class="grayLine"></div>

        <!-- 紧急联系人 -->
        <el-row class="posRelative paddB60 marT20">
            <el-col :span="24">
                    <h3>紧急联系人<icon name="notFinished" class="scaleIcon1 marLR20" v-show="!isFamMemberFinishedMsg"></icon></h3>
                    <!-- 新增紧急联系人 -->
                    <el-form ref="memberFrm" :model="memberFrm" :rules="memberRules" class="marT10" :inline="true" hide-required-asterisk=true label-width="80px" v-show="isMemberFrmShow">
                        <el-row>
                            <el-col :span="8" :lg="8" :md="12">
                                <el-form-item label="称呼" prop="memberCall">
                                    <el-input v-model.trim="memberFrm.memberCall" placeholder="请输入称呼" maxlength='4' class="inputTxtWrapper" @input.stop.native="watchFrmChange('memberFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :lg="8" :md="12">
                                <el-form-item label="姓名" prop="memberName">
                                    <el-input v-model.trim="memberFrm.memberName" placeholder="请输入姓名" maxlength='10' class="inputTxtWrapper" @input.stop.native="watchFrmChange('memberFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :lg="8" :md="12">
                                <el-form-item label="电话" prop="memberTel">
                                    <el-input v-model.trim="memberFrm.memberTel" placeholder="多个电话以，分隔" maxlength='100' class="inputTxtWrapper" @input.stop.native="watchFrmChange('memberFrm')"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <!-- 紧急联系人列表 -->
                    <div class="marB20 font14" v-show="!isMemberFrmShow && memberList.length > 0">
                         <el-row class="headerRowClass borderT1">
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1">称呼</p>
                            </el-col>
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1">姓名</p>
                            </el-col>
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1">电话</p>
                            </el-col>
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1 borderR1">操作</p>
                            </el-col>
                        </el-row>
                        <el-row class="rowClass borderT1 tdText" v-for="(item,index) of memberList" :key="item.memberId" :index="index">
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1">{{item.memberCall}}</p>
                            </el-col>
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1">{{item.memberName}}</p>
                            </el-col>
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1">{{item.memberTel}}</p>
                            </el-col>
                            <el-col :span="6">
                                <p class="paddTB10 tContent borderL1 borderR1">
                                    <icon name="change" class="scaleIcon1 marR15" title="修改" @click.native.stop="editShowMemberFrm(item.memberId,index)"></icon>
                                    <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="deleteMember(item.memberId,index)"></icon>
                                </p>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="tipNoData" v-show="memberList.length <= 0 && !isMemberFrmShow">暂无数据</div> 

                    <div class="btnGroup">
                            <button class="operatBtn marT20" @click.stop="showMemberFrm" v-show="!isMemberFrmShow">添加</button>
                            <button class="operatBtn marT20" @click.stop="cancel" v-show="isMemberFrmShow">取消</button>
                            <button class="operatBtn marT20" @click.stop="addMember" v-show="isMemberFrmShow && isAddorEdit" :disabled="!isMemberOk" :class="{notAllowed:!isMemberOk}">确认提交</button>
                            <button class="operatBtn marT20" @click.stop="editMember" v-show="isMemberFrmShow && !isAddorEdit" :disabled="!isMemberOk" :class="{notAllowed:!isMemberOk}">确认修改</button>
                    </div>
            </el-col>
        </el-row>

    </div>

     <!-- 进入系统 -->
    <div class="cropperWrapper alphaBlack" v-if="isFinishedReMsg">
        <div class="posFixedCenter">
            <div>
                <el-checkbox class="resetCheckFont" v-model="checked">承诺：本人保证我所提供以及填写的资料均属实，如有虚假的，本人愿承担一切责任。</el-checkbox>
            </div>
            <div class="marT20">
                <button class="operatBtn marR5" :class="{notAllowed : !checked}" @click.stop="updateUserPromise">确认</button>
                <button class="operatBtn" @click.stop="logout">退出系统</button>
            </div>
        </div>
    </div>


    <!-- 图片裁剪组件 -->
    <div class="cropperWrapper" v-if="isShowCropper">
        <vueCropper ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"

                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber"
                   ></vueCropper>
        <div class="cropperBtnPos">
            <button class="operatBtn" @click.stop="onCubeImg">确认裁剪</button>
            <button class="operatBtn" @click.stop="cancelCubeImg">取消</button>
        </div>
    </div>

  </div>
</template>



<script>
  import http from '../assets/js/http'
  import Cookies from 'js-cookie'
  import _g from '@/assets/js/global'
  import config from '@/assets/js/config.js'

    // import { dataURItoBlob,validateChinese,validateCardNo,validateQQ,validateNonnegativeInt} from "@/assets/js/common.js"
    import { dataURItoBlob,validateCardNo,validateQQ,validateNonnegativeInt} from "@/assets/js/common.js"

   import { sex,outlook,maritalStatus,health,nation,educationArr} from "@/assets/js/data.js"

//    import headerTop from './Common/headerTop.vue'
// import headerTop from '@/components/guest/Common/headerTop.vue'
import headerTop from '@/components/Common/headerTop.vue'
   import logoTop from './Common/logoTop.vue'

     import { mapGetters } from 'vuex'

  
  export default {
      data() {
        // 验证名字是否为中文
        // let validateUserName =  (rule, value, callback) => {
        //     if (!validateChinese(value)) {
        //         callback(new Error("请输入中文"))
        //     }else{
        //         callback()
        //     }
        // }

        // 验证QQ
        let validateUserQQ =  (rule, value, callback) => {
            if (value !== '' && !validateQQ(value)) {
                callback(new Error("请输入正确的qq号"))
            }else{
                callback()
            }
        }

    // 身份证验证
    let validateCardNum =  (rule, value, callback) => {
        if (!validateCardNo(value)) {
            callback(new Error("身份证输入不合法"))
        }else{
            this.baseMsgFrm
            console.log(value)
            callback()
        }
    }

    // 工龄验证
    let validateWoringAge =  (rule, value, callback) => {
        if (value !== '' && !validateNonnegativeInt(value)) {
            callback(new Error("请输入非负整数"))
        }else{
            callback()
        }
    }

        return {
            // 确认提交按钮默认不可用
            isBaseMsgOk:false,
            isMemberOk:false,

            isPhotoFinishedMsg : true,  //  默认我的照片已经上传完成
            isBaseMsgFinishedMsg : true,  //  默认基本信息已经填写提交完成
            isFamMemberFinishedMsg : true,  //  默认紧急联系人已经填写提交完成

            isFinishedReMsg : false,                                        //  履历基本信息默认没有全部填写完毕
            checked : false,                                                        //  默认承诺复选框不选中

            // 裁剪组件的基础配置option
            option: {
                img: '',                         //裁剪图片的地址
                info: true,                      //裁剪框的大小信息
                outputSize: 0.8,                   // 裁剪生成图片的质量
                outputType: 'jpg',              //裁剪生成图片的格式
                canScale: true,                 // 图片是否允许滚轮缩放
                autoCrop: true,                  // 是否默认生成截图框
                autoCropWidth: 295,              // 默认生成截图框宽度
                autoCropHeight: 413,             // 默认生成截图框高度
                canMove: true,                      //  能否拖动图片
                fixed: true,                    //是否开启截图框宽高固定比例
                fixedNumber: [5, 7],              //截图框的宽高比例
                centerBox: true                 //  截图框是否限制在图片里(只有在自动生成截图框时才能生效)
            },
            isShowCropper: false,            //是否显示截图框

            fileList: [],                           
            imageUrl: '',                                                               //..图片路径
            // fileUrl: '',                                                               //..简历文件路径
            
            oldPhotoName:'',                                                //..最新一次上传的图片名称
            // oldFileName:'',                                                 //..最新一次上传的简历文件名称
            // tmpFileName:'',                                                 //..临时展示的简历文件名


            sex,outlook,maritalStatus,health,nation,

            paramFile:null,                                                      //  图片
            // resumeFile:null,                                                    //  简历

            educationArr,// 学历列表

            // 基本信息
            baseMsgFrm:{
                eduId : '',//   所属教育经历id

                userName:'',//..姓名
                userSex:1, //..性别
                userBirth:'',//..出生年月
                politicalOutlook:13,       //  政治面貌
                maritalStatus:1,       //  婚姻状况
                health:1,                   //  健康状况
                nativePlace:'',         //..籍贯
                userEmail:'',       //..邮箱
                qq:'',                //  QQ       
                nation:1,           //  民族              
                userTitle:'',   //..职称
                userTel:'',     //..联系电话
                userCardNo:'',      //..身份证号
                perAddress:'',      //..户籍所在地
                concatAddress:'',      //..常住地址
                // existWorkingAge:'',  //  历史社保
                // fundAccount:'',  //  公积金账号
                iniSchool:'',  //  在读学校
                iniGradTime:'',  //  初始毕业时间

                education:6,  //  学历
                professName:'',  //  专业名称 
            },

            // 新增的家庭成员信息
            memberFrm:{
                memberCall:'',  //  称呼
                memberName:'',  //  姓名
                memberTel:'',  //  电话
            },
            memberList:[],                                                      //  家庭人员列表
            isMemberFrmShow:false,                                      //  默认隐藏该表单
            isAddorEdit:true,                                                   //  默认为确认提交按钮
            currEditorMember:{
                 memberId:null,                                              //  当前修改的紧急联系人的id
                 index:null,                                              //  当前修改的紧急联系人的数组索引
            },

             rules: {
                userName: [{
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    },
                    // {
                    //     validator: validateUserName,
                    //     message: "请输入中文",
                    //     trigger: "blur"
                    // }
                ],
                // userBirth: [{
                //         required: true,
                //         message: "请输入出生年月",
                //         trigger: "blur"
                //     }
                // ],
                nativePlace: [{
                        required: true,
                        message: "请输入籍贯",
                        trigger: "blur"
                    }
                ],
                userEmail: [
                    // {
                    //     required: true,
                    //     message: "请输入邮箱",
                    //     trigger: "blur"
                    // },
                     { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
                ],
                qq: [
                    // {
                    //     required: true,
                    //     message: "请输入qq号",
                    //     trigger: "blur"
                    // },
                    {
                        validator: validateUserQQ,
                        message: "请输入正确的qq号",
                        trigger: "blur"
                    }
                ],
                // userTitle: [{
                //         required: true,
                //         message: "请输入职称",
                //         trigger: "blur"
                //     }
                // ],
                userTel: [{
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur"
                    }
                ],
                userCardNo: [
                    {
                        required: true,
                        message: "请输入身份证号码",
                        trigger: "blur"
                    },
                    {
                        validator: validateCardNum,
                        message: "身份证输入不合法",
                        trigger: "blur"
                    }
                ],
                perAddress: [{
                        required: true,
                        message: "请输入户籍地址",
                        trigger: "blur"
                    }
                ],
                concatAddress: [{
                        required: true,
                        message: "请输入常住地址",
                        trigger: "blur"
                    }
                ],
                iniSchool: [{
                        required: true,
                        message: "请输入毕业院校",
                        trigger: "blur"
                    }
                ],
                iniGradTime: [{
                        required: true,
                        message: "请选择毕业时间",
                        trigger: "blur"
                    }
                ],
                professName: [{
                        required: true,
                        message: "请输入专业名称",
                        trigger: "blur"
                    }
                ],
                // existWorkingAge: [
                //     {
                //         validator: validateWoringAge,
                //         message: "请输入非负整数",
                //         trigger: "blur"
                //     }
                // ],
            },
            memberRules:{
                memberCall: [{
                        required: true,
                        message: "请输入称呼",
                        trigger: "blur"
                    }
                ],
                memberTel: [{
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur"
                    }
                ],
				
				memberName: [{
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    },
                ]
            },
        }
    },
    methods: {
     /* 侦听基本表单内容改变 */ 
     watchFrmChange(frmName){
        switch (frmName){
            case 'baseMsgFrm':
                this.isBaseMsgOk = true
                break
            case 'memberFrm':
                this.isMemberOk = true
                break
        }
        //  const that = this
        //   that.$refs[frmName].validate(valid => {
        //       if (valid) {//    如果表单全部验证通过  
        //         switch (frmName){
        //             case 'baseMsgFrm':
        //                 that.isBaseMsgOk = true
        //                 break
        //             case 'memberFrm':
        //                 that.isMemberOk = true
        //                 break
        //         }
                 
        //       }else{//    如果表单验证不通过
        //         switch (frmName){
        //             case 'baseMsgFrm':
        //                 that.isBaseMsgOk = false
        //                 break
        //             case 'memberFrm':
        //                 that.isMemberOk = false
        //                 break
        //         }
        //       }
        //   })
     },  

    /* 更新用户承诺为1(承诺) */
    updateUserPromise(){
        const that = this
        if(!that.checked){
            return
        }
        _g.showLoading('提交中')
        that.apiPost('admin/users/updateUserPromise').then((res) => {
            _g.showLoading().close()
            if(typeof res === 'string'){
                res = JSON.parse(res)
            }
            if (res.code != 200) {
                that.handleError(res)
            } else {
                if(res.data.isSuccess === 0){
                    _g.toastMsg("success", res.message)
                    Cookies.set('userPromise',1)
                    // that.$router.push('/admin')
                    that.$store.dispatch('setIsAdmin',false)
                    that.$router.push('/guest/welcome')//..跳转普通用户页面
                    // that.$router.push('/admin/welcome')//..跳转个人中心页面
                }else if(res.data.isSuccess === 1){
                    _g.toastMsg("warning",res.message)
                }
            }
        })
    },
    /* 退出系统 */
    logout(){
        const that = this
        _g.showLoading('退出中')
        that.apiPost('admin/base/logout').then((res) => {
            _g.showLoading().close()
            if(typeof res === 'string'){
                res = JSON.parse(res)
            }
            if (res.code != 200) {
                that.handleError(res)
            } else {
                if(res.data.isSuccess === 0){
                    _g.toastMsg("success", res.message)
                    // Delete Cookies
                    that.$router.push('/')
                }
            }
        })
    },
    /* 通过身份证号计算出生年月 */
    changeUserBirth(){
        let userCardNo = this.baseMsgFrm.userCardNo
        if(userCardNo === '' || !validateCardNo(userCardNo)){                               //..如果身份证号验证没有通过
            this.baseMsgFrm.userBirth = ''
            return
        }else{
            this.baseMsgFrm.userBirth = userCardNo.substr(6,4) + '-'  + userCardNo.substr(10,2) + '-' +  userCardNo.substr(12,2)
        }
    },

    /* 取消裁剪 */
    cancelCubeImg(){
        this.isShowCropper = false
    },
    /* 上传简历文件之前 */
    // beforeUploadFile(file){
    //     const fileSize = file.size / 1024 / 1024                                              //  换选成M
    //     let formData = new FormData()
    //      if(file.type !== 'application/pdf' && file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && file.type !== 'application/msword'){
    //            _g.toastMsg("warning", '只能上传doc、docx、pdf文件!')
    //            return
    //       }
    //     if(fileSize > 1){                                                                             //  如果超过1M
    //         _g.toastMsg("warning", '文件不能超过1M!')
    //            return
    //     }
    //     this.tmpFileName = file.name

    //     formData.append('file',file)
    //     formData.append('oldFileName',this.oldFileName)
    //     this.resumeFile = formData

    //     return false
    // },
      //阻止upload的自己上传，进行再操作
      beforeupload(file) {
          const that = this
          let reader = null
          
          if(file.type !== 'image/jpeg' && file.type !== 'image/png'){
               _g.toastMsg("warning", '只能上传jpg、jpeg、png图片!')
               return
          }  

         reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onloadend = function () {
                    that.isShowCropper = true                                                       //  显示图片裁剪
                    that.option.img = this.result                                                       //  把图片加载进入图片裁剪框
            }  

        return false
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },
      
      /* 裁剪图片 */
      onCubeImg(){
          this.$refs.cropper.getCropData((data) => {
            //console.log("压缩前的图片大小：" + data.length)
            let img = new Image(),that = this
            img.src = data
            img.onload = function() {
                //let _data = _this.compress(img)
                let blob = dataURItoBlob(data)

                let fileSize = blob.size
                if(fileSize / 1024 > 500){                                          //  图片不能超过500k
                    _g.toastMsg("warning", '图片不能超过500k!')
                    return
                }

                let formData = new FormData()
                formData.append("file", blob,'tem.jpg')
                formData.append("oldPhotoName", that.oldPhotoName)
                // formData.append('ext','jpg')                                        //..默认生成jpg文件
                that.paramFile = formData

                //console.log("将blob对象转成formData对象：" + formData.get("icon"))
                // that.$emit('cropped', data, formData)

                that.imageUrl = data                                                            //  渲染图片

                // console.log('data = ',data)
            }
            this.isShowCropper = false                                                  //  关闭裁剪框
            })
      },
      
      /* 上传人员大头照 */
      submitPhoto(){
        const that = this

        that.$confirm('是否确认上传图片?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
              }).then(() => {
                  _g.showLoading('上传中')
                that.apiPostFile('admin/resume/uploadUserPhoto', that.paramFile).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            _g.toastMsg("success", res.message)

                            // 重置
                            that.paramFile = null
                            that.imageUrl = res.data.imgUrl                                //  渲染图片

                            that.$store.dispatch('setPhotoPath',res.data.imgUrl)//..同步更新

                            that.oldPhotoName = res.data.photoName              //  已经上传的图片名

                            if(res.data.isFinishedReMsg){
                                // Cookies.set('isFinishedReMsg',res.data.isFinishedReMsg)
                                that.isFinishedReMsg = res.data.isFinishedReMsg
                            }

                            that.isPhotoFinishedMsg = true //   我的照片上传完毕

                            that.$store.dispatch('setFinishedReMsg',res.data.isFinishedReMsg)
                        }else if(res.data.isSuccess === 1){
                            _g.toastMsg("error", res.message)
                        }
                    }
                })
            }).catch(() => {})
      },

    /* 简历文件选择改变 */
    // handleChange(file, fileList){
    //     let arr = []
    //     arr.push({name : file.name})
    //     this.fileList = arr
    // },

    /* 下载简历 */
    //   downloadFile(){
    //     let fileUrl = this.fileUrl // 文件地址
    //     location.href = fileUrl
    //   },

      /* 上传当前人员简历 */
    //   submitFile(){
    //     const that = this
    //     that.$confirm('是否确认上传简历?', '提示', {
    //               confirmButtonText: '确定',
    //               cancelButtonText: '取消',
    //               type: 'warning',
    //               center: true
    //         }).then(() => {
    //             _g.showLoading('上传中')
    //             that.apiPostFile('admin/resume/uploadResumeFile', that.resumeFile).then((res) => {
    //             _g.showLoading().close()
    //             if(typeof res === 'string'){
    //                     res = JSON.parse(res)
    //                 }
    //                 if (res.code != 200) {
    //                     that.handleError(res)
    //                 } else {
    //                     if(res.data.isSuccess === 0){
    //                         _g.toastMsg("success", res.message)

    //                         // 重置
    //                         this.resumeFile = null                                                                  //  确保每次只上传一份文件
    //                         that.oldFileName = res.data.resumeFileName              //  已经上传的图片名
    //                         // that.fileUrl = res.data.fileUrl

    //                         if(res.data.isFinishedReMsg){
    //                             // Cookies.set('isFinishedReMsg',res.data.isFinishedReMsg)
    //                             that.isFinishedReMsg = res.data.isFinishedReMsg
    //                             // that.$router.push('/admin')
    //                         }
    //                     }else if(res.data.isSuccess === 1){
    //                         _g.toastMsg("error", res.message)
    //                     }
    //                 }
    //         })
    //     }).catch(() => {})
    //   },

      /* 提交用户履历基本信息 */
      submitBaseMsg(){
          const that = this
          that.$refs['baseMsgFrm'].validate(valid => {
              if (valid) {
                that.$confirm('是否确认提交基本信息?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then(() => {
                        _g.showLoading('提交中')
                        that.apiPost('/admin/resume/addmsg',that.baseMsgFrm).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if (res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)
                                    // that.fileUrl = res.data.fileUrl
                                    that.isBaseMsgOk = false
                                     // 本地存储用户名
                                    Cookies.set('userName',that.baseMsgFrm.userName)
                                    that.$store.dispatch('setUserName',that.baseMsgFrm.userName)

                                    if(res.data.isFinishedReMsg){
                                        that.isFinishedReMsg = res.data.isFinishedReMsg
                                    }

                                    that.baseMsgFrm.eduId = res.data.eduId

                                    that.isBaseMsgFinishedMsg = true//  基本信息填写完毕

                                    that.$store.dispatch('setFinishedReMsg',res.data.isFinishedReMsg)

                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }else if(res.data.isSuccess === 2){
                                    _g.toastMsg("warning", res.message)
                                     that.isBaseMsgOk = false
                                }
                            }
                    })
                }).catch(() => {})
              }
          })
      },
      
      /* 取消新增或编辑紧急联系人 */
      cancel(){
          this.isMemberOk = false

          this.isMemberFrmShow = false
          this.memberFrm.memberCall = ''
          this.memberFrm.memberName = ''
          this.memberFrm.memberTel = ''
          this.editMemberId = null
          this.$refs.memberFrm.resetFields()
      },

    /* 显示新增紧急联系人表单 */
    showMemberFrm(){
        const that = this
        that.isMemberFrmShow = true
        that.isAddorEdit = true                             //  确认提交按钮
    },

     /* 新增紧急联系人 */
      addMember(){
          const that = this
          const data = that.memberFrm
          that.$refs['memberFrm'].validate(valid => {
              if (valid) {
                that.$confirm('是否确认新增?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then(() => {
                        _g.showLoading('提交中')
                        that.apiPost('/admin/resume/addMember',that.memberFrm).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if (res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)
                                    that.isMemberOk = false
                                    that.memberList.push({
                                        memberCall : data.memberCall,
                                        memberName : data.memberName,
                                        memberTel : data.memberTel,
                                        memberId : res.data.id
                                    })
                                    that.isMemberFrmShow = false                                //  隐藏表单

                                    // 重置表单
                                    that.memberFrm.memberCall = ''
                                    that.memberFrm.memberName = ''
                                    that.memberFrm.memberTel = ''

                                    if(res.data.isFinishedReMsg){
                                        // Cookies.set('isFinishedReMsg',res.data.isFinishedReMsg)
                                        that.isFinishedReMsg = res.data.isFinishedReMsg
                                        // that.$router.push('/admin')
                                    }

                                    that.isFamMemberFinishedMsg = true //   紧急联系人已经填写
                                    that.$store.dispatch('setFinishedReMsg',res.data.isFinishedReMsg)

                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }
                            }
                    })
                }).catch(() => {})
              }
          })
      },

    /* 编辑紧急联系人 */  
      editShowMemberFrm(memberId,index){
        const that = this
        that.isMemberFrmShow = true                           //  显示表单
        that.isAddorEdit = false                                      //  修改按钮
        that.memberFrm.memberCall = that.memberList[index].memberCall
        that.memberFrm.memberName = that.memberList[index].memberName
        that.memberFrm.memberTel = that.memberList[index].memberTel

        // 当前被编辑的紧急联系人
        that.currEditorMember.memberId = memberId
        that.currEditorMember.index = index
      },

     /* 确认修改紧急联系人 */
      editMember(){
          const that = this
         
          const memberId = that.currEditorMember.memberId
          const index = that.currEditorMember
          
           let data = {
               memberId,
               memberCall :  that.memberFrm.memberCall,
               memberName : that.memberFrm.memberName,
               memberTel : that.memberFrm.memberTel
          }

          that.$refs['memberFrm'].validate(valid => {
              if (valid) {
                that.$confirm('是否确认修改?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then(() => {
                        _g.showLoading('提交中')
                        that.apiPost('/admin/resume/editMember',data).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if (res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)
                                    that.isMemberOk = false
                                    that.memberList.splice(index,1,data)
                                    that.isMemberFrmShow = false                                //  隐藏表单

                                    // 重置
                                    that.memberFrm.memberCall = ''
                                    that.memberFrm.memberName = ''
                                    that.memberFrm.memberTel = ''
                                    that.currEditorMember.memberId = null
                                    that.currEditorMember.index = null

                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }else if(res.data.isSuccess === 2){
                                    _g.toastMsg("warning", res.message)
                                    that.isMemberOk = false
                                }
                            }
                    })
                }).catch(() => {})
              }
          })
      },

      /* 删除紧急联系人 */  
      deleteMember(memberId,index){
        const that = this
        that.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }).then(() => {
                _g.showLoading('删除中')
                that.apiPost('/admin/resume/deleteMember',{memberId}).then((res) => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            _g.toastMsg("success", res.message)
                            that.memberList.splice(index,1)

                        }else if(res.data.isSuccess === 1){
                            _g.toastMsg("error", res.message)
                        }
                    }
            })
        }).catch(() => {})
      },

       /* 获取用户履历信息 */
      getUserResume(){
        const that = this

        let memberList = []
        let eduList = []

        _g.showLoading('加载中');
        that.apiPost("admin/resume/queryByUserId").then(res => {
            _g.showLoading().close()
            if(typeof res === 'string'){
                res = JSON.parse(res)
            }
            if (res.code != 200) {
                this.handleError(res)
            } else {
                if(res.data.isSuccess === 0){             //  成功
                     
                     that.isFinishedReMsg = res.data.isFinishedReMsg        //  履历是否填写完毕

                     if(!res.data.isFinishedReMsg){         // 如果履历没有全部填写完毕
                        if(res.data.user.userPhoto === null){       //  如果我的照片没有上传 
                            that.isPhotoFinishedMsg = false
                        }
                        if(res.data.user.user_name === null){       //  如果基本信息没有填写 
                            that.isBaseMsgFinishedMsg = false
                        }
                        if(res.data.user.familyMember.length <= 0){       //  如果紧急联系人没有填写 
                            that.isFamMemberFinishedMsg = false
                        }
                     }

                    // 大头照初始化
                    if(res.data.user.userPhoto && res.data.user.userPhoto.photo_path){
                        that.imageUrl = res.data.user.userPhoto.photo_path
                        that.oldPhotoName = res.data.user.userPhoto.photo_name
                    }

                    // 基本信息初始化
                    that.baseMsgFrm.userName = res.data.user.user_name || ''
                    that.baseMsgFrm.userSex = res.data.user.user_sex || 1
                    that.baseMsgFrm.userBirth = res.data.user.date_birth || ''
                    that.baseMsgFrm.politicalOutlook = res.data.user.political_outlook || 13
                    that.baseMsgFrm.maritalStatus = res.data.user.marital_status || 1
                    that.baseMsgFrm.health = res.data.user.health || 1
                    that.baseMsgFrm.nativePlace = res.data.user.native_place || ''
                    that.baseMsgFrm.userEmail = res.data.user.user_email || ''
                    that.baseMsgFrm.qq = res.data.user.user_qq || ''
                    that.baseMsgFrm.nation = res.data.user.nation || 1
                    that.baseMsgFrm.userTitle = res.data.user.user_title || ''
                    that.baseMsgFrm.userTel = res.data.user.user_tel || ''
                    that.baseMsgFrm.userCardNo = res.data.user.user_card_num || ''
                    that.baseMsgFrm.perAddress = res.data.user.per_address || ''
                    that.baseMsgFrm.concatAddress = res.data.user.concat_address || ''
                    // that.baseMsgFrm.existWorkingAge = res.data.user.exist_working_age === null ? '' : res.data.user.exist_working_age
                    // that.baseMsgFrm.fundAccount = res.data.user.fund_account === null ? '' : res.data.user.fund_account
                    // that.baseMsgFrm.iniSchool = res.data.user.iniSchool === null ? '' : res.data.user.ini_school
                    // that.baseMsgFrm.iniGradTime = res.data.user.iniGradTime === null ? '' : res.data.user.ini_grad_time

                    if(res.data.user.eduExper.length > 0){
                        that.baseMsgFrm.eduId = res.data.user.eduExper[0].id
                        that.baseMsgFrm.iniSchool = res.data.user.eduExper[0].graduated_school
                        that.baseMsgFrm.iniGradTime = res.data.user.eduExper[0].graduated_time
                        that.baseMsgFrm.education = res.data.user.eduExper[0].education
                        that.baseMsgFrm.professName = res.data.user.eduExper[0].professional_name
                    }


                    // 紧急联系人初始化
                    for(let member of res.data.user.familyMember){
                        memberList.push({
                            memberId : member.id,
                            memberCall : member.member_call,
                            memberName : member.member_name,
                            memberTel : member.member_tel,
                        })
                    }
                    that.memberList = memberList
                }else{
                    _g.toastMsg("error", res.message)
                }
            }
        })
      },  
    },
    components: {
      headerTop,
      logoTop
    },
    computed: {
        ...mapGetters([                                                                         
            'getPhotoPath'
        ]),
    },
    created () {
        this.getUserResume()
    },
    mixins: [http]
  }
</script>

<style scoped>

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 250px;
    /* width: 178px;
    height: 178px; */
    line-height: 178px;
    text-align: center;

    border: 1px dashed #8c939d;
  }
  .avatar {
    /* width: 178px;
    height: 178px; */
    width: 178px;
    height: 250px;
    display: block;
    border: 1px dashed #8c939d;
  }

  /* 填写履历信息 */
h3{
    font-size: 14px;
    color: #ef8200;
    padding-bottom: 10px;
}

.line{
    height: 2px;
    background-color: #ef8200;
}

.addResumeWrapper{
    /* width: 1000px; */
    margin: 20px auto;
    /* border: 1px solid #d1d1d1; */
    padding: 20px;
} 

.btnGroup{
    position: absolute;
    bottom: 20px;
}

.avatarSmall {
    /* width: 72px; */
    width: 52px;
    height: 72px;
    display: block;
    border: 1px dashed #8c939d;
    position: absolute;
    top: 50px;
    right: 20px;
    /* padding-bottom:  */
} 

</style>

<style>
/* 重写element下拉列表 */
</style>




